原定標題你真的需要redux嗎-利用react hook來實現redux但好像無法擠一篇完成啊??

一樣又是一成不變的前言:

其實我個人只使用過redux的管理資料方式，關於利用hook達到跟redux相同功能也只看過前輩的code，並無自己實際去操作及撰寫過。今天就透過我這redux愛用者的角度去研究看看類似功用的hook吧。

參考文章:
React | 在 Hooks 中以 useContext 與 useReducer 實現 Redux
這篇文章解析得非常清楚，而且直接就有把redux與hook實際上操作放上比較，看完我的菜鳥解讀後還不了解的話，這篇文章非常值得參考，大推特推。

先來一個基本介紹吧

useContext
const value = useContext(MyContext);
能跨component傳遞props，讓所有子層或子子孫孫層取用 props，而不是一個一個向下傳遞 props。

React.createContext
const MyContext = React.createContext(defaultValue);
需要帶入一個初始值，以及創建一個Context object

<MyContext.Provider value={val}>
<MyContext.Provider>的更新時，此 Hook 將觸發重新渲染，並將最新的value傳遞給該MyContext。即使上層使用React.memoor shouldComponentUpdate，仍會重新渲染。

當value 變化時，有調用useContext的component會重新渲染。可以使用 memoization 對其進行優化。

類似Redux的<Provider store={store}>，不過Redux中的store值有所改變時並不會導致重新渲染。

// createContext

const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// redux store

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'

import { App } from './App'
import createStore from './createReduxStore'

const store = createStore()

// As of React 18
const root = ReactDOM.createRoot(document.getElementById('root'))
    root.render(
      <Provider store={store}>
        <App />
      </Provider>
    )
} 

上個官網的demo code吧

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};
// grandpa component賦予值
const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// parent component
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

// children component可取用
function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

參考文章:
https://dev.to/eswaraprakash/react-usecontext-and-usereducer-hooks-2pkm

內容不少剩下明天繼續吧：
帶您認識 useReducer, aka useContext好夥伴